<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta content="initial-scale=1.0, user-scalable=no, width=device-width" name="viewport"/>
<title>自定义栅格底图</title>
<link href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" rel="stylesheet"/>
<style>
        html,
        body,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width: auto;">
<div class="input-item">
<button class="btn" id="add-layer">叠加XYZ图层</button>
</div>
<div class="input-item">
<button class="btn" id="remove-layer">移除XYZ图层</button>
</div>
</div>
<script src="https://webapi.amap.com/maps?v=2.0&amp;key=0ae35d1788e8c33039dd3015c317ceda"></script>
<script>
    var map = new AMap.Map('container', {
        layers: [new AMap.TileLayer.Satellite()]
    });

    var xyzTileLayer = new AMap.TileLayer({
        // 图块取图地址
        getTileUrl: 'https://wprd0{1,2,3,4}.is.autonavi.com/appmaptile?x=[x]&y=[y]&z=[z]&size=1&scl=1&style=8&ltype=11',
        zIndex: 100
    });

    // 添加图层
    function addXYZTileLayer() {
        map.add(xyzTileLayer);
    }
  	// 移除图层
    function removeXYZTileLayer() {
        map.remove(xyzTileLayer);
    }

  document.getElementById('add-layer').addEventListener('click', addXYZTileLayer);
  document.getElementById('remove-layer').addEventListener('click', removeXYZTileLayer);
</script>
<script>
    var map = L.map('map').setView([39.46266, 118.263947], 15);
    // 这里拷贝你的底图配置代码, 例如：
    // L.tileLayer('your_tile_layer_url').addTo(map); 
    
    L.marker([39.46266, 118.263947]).addTo(map)
      .bindPopup('经度: 118.263947, 纬度: 39.46266');
    
    L.marker([39.461425, 118.265981]).addTo(map)
      .bindPopup('经度: 118.265981, 纬度: 39.461425');
    
    L.marker([39.461425, 118.265981]).addTo(map)
      .bindPopup('经度: 118.265981, 纬度: 39.461425');
    
    L.marker([39.461425, 118.265981]).addTo(map)
      .bindPopup('经度: 118.265981, 纬度: 39.461425');
    
    L.marker([39.461245, 118.265915]).addTo(map)
      .bindPopup('经度: 118.265915, 纬度: 39.461245');
    
    L.marker([39.461307, 118.265813]).addTo(map)
      .bindPopup('经度: 118.265813, 纬度: 39.461307');
    
    L.marker([39.461307, 118.265813]).addTo(map)
      .bindPopup('经度: 118.265813, 纬度: 39.461307');
    
    L.marker([39.461245, 118.265915]).addTo(map)
      .bindPopup('经度: 118.265915, 纬度: 39.461245');
    
</script></body>
</html>